<script setup>
import { computed, onMounted, ref } from 'vue';
import ModelSettings from '../model-settings/ModelSettings.vue';
import { tenant_llm_list } from '../../../api/llm_service';
import { getLlmIcon } from '../../../utils';

const dialogSettingVisible = ref(false)
const modelParam = ref(null)
const tenantLlms = ref([])
const selectedName = ref("")
const scrollbarRef = ref()

onMounted(async () => {
    tenantLlms.value = await tenant_llm_list()
    if (tenantLlms.value.length > 0) {
        // todo: 目前默认获取列表的第一个元素作为选中元素，后续选中模型保存在对话记录chat元数据中
        selectedName.value = tenantLlms.value[0].name
    }
})

function setModel(tllm) {
    modelParam.value = tllm
    dialogSettingVisible.value = true
}

function selectCard(card) {
    selectedName.value = card.name
    scrollbarRef.value.scrollTo({ left: 0 })
}

const sortedTenantLlms = computed(() => {
    return [...tenantLlms.value].sort((a, b) => {
        if (a.name === selectedName.value) return -1
        if (b.name === selectedName.value) return 1
        return 0
    })
})

async function onModelSet(setName) {
    tenantLlms.value = await tenant_llm_list()
    if (setName === null) {
        // 删除场景，默认选中第一个
        selectedName.value = tenantLlms.value.length > 0 ? tenantLlms.value[0].name : "";
        return
    }
    selectedName.value = ""
    tenantLlms.value.forEach((llm)=>{
        if (llm.name === setName) {
            selectedName.value = setName
        }
    })
}
</script>

<template>
    <el-scrollbar ref="scrollbarRef">
        <div class="cards-container">
            <el-space>
                <el-button icon="Plus" size="default" @click="setModel(null)" circle></el-button>

                <el-card v-for="tllm in sortedTenantLlms" :key="tllm.name"
                    @click.native="selectCard(tllm)" :class="{ 'selected-card': selectedName === tllm.name }"
                    style="border-radius: 24px;" shadow="never" :body-style="{ padding: '4px 8px' }">
                    <div class="normal-card-body">
                        <el-image :src="getLlmIcon(`${tllm.llm_factory.toLowerCase()}.svg`)" fit="fill"
                        style="width: 24px; height: 24px;"></el-image>
                        <el-text style="margin-left: 6px;">{{ tllm.name }}</el-text>
                        <el-divider direction="vertical"></el-divider>
                        <el-icon @click.stop="setModel(tllm)"><Setting/></el-icon>
                    </div>
                </el-card>
            </el-space>
        </div>
    </el-scrollbar>

    <ModelSettings v-model:isVisible="dialogSettingVisible" :modelParam="modelParam" @onModelSet="onModelSet" />
</template>

<style scoped>
.cards-container {
    display: inline-flex;
    flex-direction: row;
    padding: 3px;
    white-space: nowrap;
}

.normal-card-body {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

.selected-card {
    border: 1px solid #40a9ff;
    box-shadow: #40a9ff;
    order: -1; /* 配合flex布局实现置顶 */
}
</style>